<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }
        .nav{
            width:900px;
            height: 50px;
            margin:50px auto;
            background: #ccc;
            
        }
        .nav .first>li{
            width:100px;
            height: 50px;
            float: left;
            text-align: center;
            line-height: 50px;
            position: relative;
            
        }
        .sec{
            width: 100px;
            position:absolute;
            display: none;
            background: #666;
        }
        
    </style>
</head>
<body>
<div class="nav">

    <ul class='first'>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单
            <ul class='sec'>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
    </ul>

</div>

<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*1.当移动到第一级li上的时候,让对应的ul显示*/
        $('.first>li').hover(function () {
            /*当我们移动到下一ul的时候,我们需要上一个ul的动画立即结束
            * 只需要在动画的调用之前调用stop()方法*/
//            /*让当前对应的ul使用滑动动画显示*/
//            $(this).children('.sec').stop().slideDown();
//            /*1.2让他的兄弟节点的对应的ul使用动画隐藏*/
//            $(this).siblings().children('.sec').stop().slideUp();
            /*因为进去和出来都是切换动画,所以我们直接在hover的进去的时候写代码
            * 因为在出来的时候也会执行对应的代码*/
            $(this).children('.sec').stop().slideToggle();

        })
    })
</script>

</body>
</html>